<template>
	<view>
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="title">{{article.title}}</view>
		<u-button :plain="true" :ripple="true" style="width: 20%;margin: 0 auto;display: block;" size="mini" :type="type" v-if="info.nickname" @click="tocollect">{{text}}</u-button>
		<view class="tag">
			<span>创建时间为：{{$u.timeFormat(article.created, 'yyyy年mm月dd日 hh时')}}</span>
			<u-tag :text="article.categories" shape="circle" />
		</view>
		<u-image width="100%" height="400rpx" :src="article.thumbnail" :lazy-load="true">
			<u-loading slot="loading"></u-loading>
			<view slot="error" style="font-size: 24rpx;">加载失败</view>
		</u-image>
		<view class="u-content">
			<u-parse :html="article.content" :show-with-animation="true"></u-parse>
		</view>
		
		<view class="text" v-if="info.nickname">
			<p>评论</p>
			<u-input type="textarea" height="100" :border="true" v-model="content" />
			<view style="text-align: center;">
				<u-button :custom-style="customStyle" type="error" @click="reset">重置</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tosubmit">提交</u-button>
			</view>

		</view>

		<view class="comment" v-for="(res, index) in commentlist" :key="res.id" v-if="res.status == 'approved'">
			<view class="left">
				<u-avatar mode="square" :src="res.profilephoto"></u-avatar>
			</view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.author }}</view>
					<view class="like" :class="{ highlight: res.isLike }">
						<view class="num"></view>
						<!-- 						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"></u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" ></u-icon> -->
					</view>
				</view>
				<view class="content">{{ res.content }}</view>
				<view class="bottom">
					{{$u.timeFormat(res.date, 'yyyy年mm月dd日 hh时MM分ss秒')}}
					<view class="reply"></view>
				</view>
				<!-- 				<view class="reply-box">
					<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
						<view class="username">{{ item.name }}</view>
						<view class="text">{{ item.contentStr }}</view>
					</view>
					<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
						共{{ res.allReply }}条回复
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view>
				</view> -->
				<!-- 				<view class="bottom">
					{{ res.date }}
					<view class="reply">回复</view>
				</view> -->
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		onLoad(obj) {
			this.date1 = new Date().valueOf()
			console.log(this.type)
			this.getData(obj)
			if (this.info.nickname) {
				this.$u.api.postgetcollect({
					username: this.info.username
				}).then(res => {
					console.log(res)
					res.data.forEach(item => {
						if (item.aid == obj.id) {
							this.type = "success"
							this.text = "已收藏"
						}
					})
				})
			}
		},
		computed: {
			...mapGetters({
				info: "vuex_user",
				token: "vuex_token"
			})
		},
		onUnload() {
			this.article = {}
			this.date2 = new Date().valueOf()
			console.log(this.date2 - this.date1)
			if (this.info.username)
				this.$u.api.postupdatetime({
					time: parseInt((this.date2 - this.date1) / 1000),
					username: this.info.username
				}).then(res => {
					console.log(res)
				})
		},
		data() {
			return {
				date1: 0,
				date2: 0,
				article: {

				},
				type: "",
				content: '',
				commentlist: [],
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					display: "inline-block",
					width: "300rpx",
					marginLeft: "10px",
					marginRight: "10px9"
				},
				id: 0,
				text: "收藏",
				scrollTop: 0
			}
		},
		methods: {
			getData(obj) {
				this.id = obj.id
				this.$u.api.postshowarticle({
					id: obj.id,
					username: this.info.username,
				}).then(res => {
					console.log(res)
					this.article = res.data.article
					this.commentlist = []
					res.data.commentlist.forEach(item => {
						this.commentlist.push(item)
					})
					console.log(this.commentlist)
					this.content = ""
				}).catch(err => {
					console.log(err)
				})
			},
			tosubmit() {
				if (this.content == "")
					return
				let params = {
					article_id: this.article.id,
					author: this.info.username,
					status: "approved",
					content: this.content,

				}
				this.$u.api.postaddcomment(params, this.token).then(res => {
					console.log(res)
					if(res.code==200){
						this.$refs.uTips.show({
							title: res.msg,
							duration: '2300'
						})
					}
					this.getData({
						id: this.article.id
					})
				})
			},
			reset() {
				this.content = ""
			},
			tocollect() {
				if (this.text == "收藏")
					this.$u.api.postaddcollect({
						username: this.info.username,
						a_id: this.id
					}).then(res => {
						console.log(res)
						this.type = "success"
						this.text = "已收藏"
					})
				else
				if (this.text == "已收藏")
					this.$u.api.postdelcollect({
						username: this.info.username,
						a_id: this.id
					}).then(res => {
						console.log(res)
						this.type = ""
						this.text = "收藏"
					})
			},
			onPageScroll(e) {
					this.scrollTop = e.scrollTop;
				}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		font-size: 20px;
	}

	.tag {
		text-align: right;
		margin-top: 20px;
		margin-bottom: 10px;
		margin-right: 30px;

		span {
			display: inline-block;
			margin-right: 10px;
		}
	}

	.u-content {
		margin-top: 100rpx;
		width: 95%;
		text-align: center;
	}

	.text {
		margin-top: 30px;

		p {
			font-size: 20px;
			display: block;
			color: #DD6161;
			margin-left: 20px;
		}

		.u-input {
			width: 700rpx;
			margin: 0 auto;
		}
	}

	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
